<!doctype html>
<html class="no-js">
<head>
    <title>ZTE 中兴金融科技</title>
    {{include 'base/style.html'}}
    <link rel="stylesheet" href="{{=URL('static','assets/css/amazeui.datatables.min.css')}}">

</head>

<body>
<!-- 内容区域 -->
<!--<div class="container-fluid am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
            <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 首页
                <small>智能投顾管理后台</small>
            </div>
            <p class="page-header-description">中兴(沈阳)金融科技有限公司</p>
        </div>
        &lt;!&ndash;<div class="am-u-lg-3 tpl-index-settings-button">
            <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置
            </button>
        </div>&ndash;&gt;
    </div>

</div>-->

<div class="row-content am-cf">
    <div class="row  am-cf">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-4">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">关联图谱</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div class="widget-body am-fr">
                    <div class="am-fl">
                        <div class="widget-fluctuation-period-text">
                           标签总数: {{=ig[0][ig.keys().index('labelCount')]}}

                            <button class="widget-fluctuation-tpl-btn">
                                <i class="am-icon-calendar"></i>
                                更多数据
                            </button>
                        </div>
                    </div>

                    <div class="am-fr am-cf">
                        <div class="widget-fluctuation-description-amount text-success" am-cf>
                            {{=ig[0][ig.keys().index('propertyKeyCount')]}}

                        </div>
                        <div class="widget-fluctuation-description-text am-text-right">
                            属性类型
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
            <div class="widget widget-primary am-cf">
                <div class="widget-statistic-header">
                    关系总数
                </div>
                <div class="widget-statistic-body">
                    <div class="widget-statistic-value">
                        {{=ig[0][ig.keys().index('relCount')]}}
                    </div>
                    <div class="widget-statistic-description">
                        关系类型总数 <strong>{{=ig[0][ig.keys().index('relTypeCount')]}}</strong>
                    </div>
                    <span class="widget-statistic-icon am-icon-credit-card-alt"></span>
                </div>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
            <div class="widget widget-purple am-cf">
                <div class="widget-statistic-header">
                    节点总数
                </div>
                <div class="widget-statistic-body">
                    <div class="widget-statistic-value">
                        {{=ig[0][ig.keys().index('nodeCount')]}}
                    </div>
                    <div class="widget-statistic-description">
                         <strong></strong>
                    </div>
                    <span class="widget-statistic-icon am-icon-support"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="row am-cf">
        <div class="am-u-sm-12 am-u-md-8">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">关联图谱实体数量</div>
                    <div class="widget-function am-fr">

                    </div>
                </div>
                <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts">

                </div>
            </div>
        </div>

        <div class="am-u-sm-12 am-u-md-4">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">关联图谱数据总览</div>
                    <div class="widget-function am-fr">

                    </div>
                </div>
                <div class="widget-body widget-body-md am-fr">

                    <div class="am-progress-title">节点总数 <span
                            class="am-fr am-progress-title-more">{{=ig[0][ig.keys().index('nodeCount')]}}</span>
                    </div>
                    <div class="am-progress">
                        <div class="am-progress-bar" style="width: {{=round(float(ig[0][ig.keys().index('nodeCount')])/10000000,2)}}%"></div>
                    </div>
                    <div class="am-progress-title">关系总数<span
                            class="am-fr am-progress-title-more">{{=ig[0][ig.keys().index('relCount')]}}</span>
                    </div>
                    <div class="am-progress">
                        <div class="am-progress-bar  am-progress-bar-warning" style="width: {{=round(float(ig[0][ig.keys().index('relCount')])/100,2)}}%"></div>
                    </div>
                    <div class="am-progress-title">标签总数<span
                            class="am-fr am-progress-title-more">{{=ig[0][ig.keys().index('labelCount')]}}</span>
                    </div>
                    <div class="am-progress">
                        <div class="am-progress-bar am-progress-bar-danger" style="width: {{=round(float(ig[0][ig.keys().index('labelCount')])/100,2)}}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row am-cf" >
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 widget-margin-bottom-lg" >
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">图数据模型</div>
                    <div class="widget-function am-fr">

                    </div>
                </div>
                <div class=" widget-body-md widget-body tpl-amendment-echarts am-fr" style="min-height: 430px;" id="graphecharts">

                </div>
            </div>
        </div>
    </div>
    <div class="row am-cf">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 widget-margin-bottom-lg">

            <div class="widget am-cf widget-body-lg">

                <div class="widget-body  am-fr">
                    <div class="am-scrollable-horizontal ">
                        <table width="100%" class="am-table am-table-striped am-table-bordered am-table-compact "
                               id="example-r">
                            <thead>
                            <tr>
              {{for row in igdata.keys():}} <th>{{=row}}</th> {{pass}}
                            </tr>
                            </thead>
                            <tbody>
              {{for rows in igdata:}} <tr class="gradeX">{{for i,row in enumerate(igdata.keys()):}} <td> {{=rows[i]}}</td> {{pass}}</tr> {{pass}}
                            <!-- more data -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


{{include 'base/jsFile.html'}}
<script src="{{=URL('static','assets/js/echarts.min.js')}}?v2018"></script>
<script src="{{=URL('static','assets/js/amazeui.datatables.min.js')}}"></script>
<script src="{{=URL('static','assets/js/dataTables.responsive.min.js')}}"></script>
<script>
    $(function () {

        pageData['index']();

    })
    var pageData = {
        // ===============================================
        // 首页
        // ===============================================
        'index': function indexData() {
            $('#example-r').DataTable({
                responsive: true,
                bAutoWidth : true,
            });




            var lablename=[{{for row in ig[0][ig.keys().index('labels')]:}}'{{=row}}',{{pass}}];
            var lablevalue={{=ig[0][ig.keys().index('labels')].values()}};
            // ==========================
            // 百度图表A http://echarts.baidu.com/
            // ==========================
            var echartsA = echarts.init(document.getElementById('tpl-echarts'));
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: lablename
                }],
                yAxis: [{
                    type: 'value'
                }],
                textStyle: {
                    color: '#838FA1'
                },
                series: [{
                    name: '实体',
                    type: 'line',
                    stack: '条数',
                    areaStyle: {normal: {}},
                    data: lablevalue,
                    itemStyle: {
                        normal: {
                            color: '#1cabdb',
                            borderColor: '#1cabdb',
                            borderWidth: '3',
                            borderType: 'solid',
                            opacity: '1'
                        },
                        emphasis: {}
                    }
                }]
            };


            echartsA.setOption(option);

            var echartsB = echarts.init(document.getElementById('graphecharts'));
            optionB = {
                "title": {
                    "text": ""
                },
                "legend": [{
                    "data":[{{for node in iggraph[0][iggraph.keys().index('nodes')]:}}'{{=node['name']}}',{{pass}}]

                }],
                "series": [{
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 12
                            }
                        }
                    },
                    "circular": {
                        "rotateLabel": true
                    },
                    "focusNodeAdjacency": true,
                    "roam": true,
                    "top": 150,
                    "bottom": 80,
                    "data":  [{{for node in iggraph[0][iggraph.keys().index('nodes')]:}}{"category":'{{=node['name']}}',"name":'{{=node['name']}}',"count":'{{=node['count']}}',"draggable": "true"},{{pass}}],
                    "links": [{{for node in iggraph[0][iggraph.keys().index('relationships')]:}}{"category":'{{=node['type']}}',"source":'{{=node.start_node['name']}}',"target":'{{=node.end_node['name']}}'},{{pass}}],
                    "layout": "force",  //force是力向图，circular是和弦图
                    "force": {
                        "repulsion": 300,
                        "edgeLength" :150,
                    },
                    "symbolSize": 55,
                    edgeSymbol: ['none', 'arrow'],
                    "edgeLabel": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 11
                            },
                            formatter: function(param) {
                                return param.data.category;
                            }
                        }
                    },

                    "lineStyle": {
                        "normal": {
                            "width": 1,
                            "curveness": 0.3,
                            "opacity": 0.9
                        }
                    },
                    "type": "graph",
                    "categories": [{{for node in iggraph[0][iggraph.keys().index('nodes')]:}}{"name":'{{=node['name']}}'},{{pass}}]
                }],
                "animationEasingUpdate": "quinticInOut",
                "tooltip": {
                    "formatter": function(param) {
                        if (param.dataType === 'edge') {
                            return param.data.category + ': ' + param.data.target;
                        }
                        return param.data.category + ': ' + param.data.count;
                    }
                },
                "animationDurationUpdate": 1500
            };
            echartsB.setOption(optionB);
            var triggerAction = function(action, selected) {
              legend = [];

              for (name in selected) {
                if (selected.hasOwnProperty(name)) {
                  legend.push({
                    name: name
                  });
                }
              }
              echartsB.dispatchAction({
                type: action,
                batch: legend
              });
            };

            //是否只选择一个图例
            var isFirstUnSelect = function(selected) {
              var unSelectedCount = 0;
              var SelectedCount = 0;
              for (name in selected) {
                if (!selected.hasOwnProperty(name)) {
                  continue;
                }else{
                    SelectedCount ++;
                }

                if (selected[name] == false) {
                  unSelectedCount++;
                }
              }

              return unSelectedCount == 1||SelectedCount==unSelectedCount;
            };

            //定义一个开关，第一次点击的时候才翻转。当所有都被选择的时候，再次点击不会只显示一个。
            var onOff = true;
            echartsB.on('legendselectchanged', function(obj) {
                  var selected = obj.selected;
                  var legend = obj.name;
//                  alert(selected);
              // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
              // 使得 无 selected 对象
              if (selected != undefined && isFirstUnSelect(selected) && onOff) {
                triggerAction('legendToggleSelect', selected);
//                onOff = false;
              }
            });

        }
    }
</script>
</body>
</html>